<template>
	<div class="canteen-list">
        <nav-header></nav-header>

        <div class="zh-table">
			<div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 300px">
                        <el-date-picker
                            v-model="listParam.pickerTime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator=" - "
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
					</div>
                    <div class="open-width">
                        <el-input v-model="listParam.keyword" @keyup.enter.native="searchFunc" placeholder="菜式、数量"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="publish">发布菜单</el-button>               
                    <el-button type="danger" @click="dleteAllConfirm">批量删除</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    :span-method="objectSpanMethod"
                    @selection-change="tableSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="day_time"
                        label="日期"
                        align="center"
                        width="180"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="menus_name"
                        label="餐次"
                        align="center"
                        width="100"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="menu_name"
                        label="菜式"
                        align="center"
                        width="500"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="menus_number"
                        label="菜式数量"
                        align="center"
                        width="100"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="user_name"
                        label="创建者"
                        align="center"
                        width="160"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="180">
                        <template slot-scope="scope">
                            <el-button @click="editRow(scope.row.day_time)" type="text">编辑</el-button>
                            <el-button @click="goDetail(scope.row.day_time)" type="text">详情</el-button>
                            <el-button @click="deleteRowConfirm(scope.row.id)" type="text" class="delete-button">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

				<div class="table-pagination" v-show="totalNumber > 10">
					<el-pagination
						@size-change="changeCurrentSize"
						@current-change="changeCurrentPage"
						:current-page="listParam.pageIndex"
						:page-sizes="[10, 20, 30, 40, 50, 100]"
						:page-size="listParam.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalNumber">
					</el-pagination>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rowLen: 0,
            totalNumber: 0,
            selected: [], // 选中的数据
            listData: [],
            loading: {
                status: false,
                txt: '获取数据...'
            },
            listParam: {
                keyword: '',
                pageIndex: 1,
                pageSize: 10,
                pickerTime: []
            },
            spanArr: [],
            demoData: [
                {
                    create_time: "2019-09-25 14:56:16",
                    day_time: "2019-09-25",
                    id: 5,
                    user_name: "超级管理员",
                    menus: [
                        {
                            menu_name: "2",
                            name: "早餐",
                            number: 4
                        },
                        {
                            menu_name: "2",
                            name: "早餐1",
                            number: 4
                        },
                        {
                            menu_name: "2",
                            name: "早餐2",
                            number: 4
                        }
                    ]
                },
                {
                    create_time: "2019-09-26 14:56:16",
                    day_time: "2019-09-26",
                    id: 6,
                    user_name: "超级管理员",
                    menus: [
                        {
                            menu_name: "2",
                            name: "午餐",
                            number: 4
                        },
                        {
                            menu_name: "2",
                            name: "午餐1",
                            number: 4
                        },
                        {
                            menu_name: "2",
                            name: "午餐2",
                            number: 4
                        }
                    ]
                },
                {
                    create_time: "2019-09-27 14:56:16",
                    day_time: "2019-09-27",
                    id: 7,
                    user_name: "超级管理员",
                    menus: [
                        {
                            menu_name: "2",
                            name: "晚餐",
                            number: 4
                        },
                        {
                            menu_name: "2",
                            name: "晚餐1",
                            number: 4
                        },
                        {
                            menu_name: "2",
                            name: "晚餐2",
                            number: 4
                        }
                    ]
                }
            ]
        }
    },
    created() {
        this.getList();
    },
    methods: {
        /**
         * 合并行或列
         */
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if ([0, 1, 5, 6, 7].includes(columnIndex)) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;

                return {
                    rowspan: _row,
                    colspan: _col
                }
            } else {
                return {
                    rowspan: 1,
                    colspan: 1
                }
            }
        },
        /**
         * 需要生成一个与行数相同的数组记录每一行设置的合并数
         */
        getSpanArr(data) {
            this.spanArr = [];
            this.listData = [];

            data.forEach(item => {
                let arr = [];

                item.menus.forEach((val, inx) => {
                    let name = val.menu.map((item, item1, item2) => {
                        return item.name;
                    })
 
                    this.listData.push({
                        id: item.id,
                        day_time: item.day_time,
                        menus_name: val.name,
                        menu_name: name.join(' , '),
                        menus_number: val.menu.length,
                        user_name: item.user_name,
                        create_time: item.create_time
                    })

                    if (inx === 0) {
                        arr.push(1);
                    } else {
                        arr.push(0);
                        arr[0]++;
                    }
                })

                this.spanArr = this.spanArr.concat(arr);
            })
        },
        /**
         * 获取菜单管理列表
         */
        getList() {
            this.loading.status = true;

            let success = (res => {
                this.loading.status = false;
                this.totalNumber = res.data.data_sum;

                this.getSpanArr(deep_clone(res.data.data));
            })
            let params = {
                start_date: this.listParam.pickerTime[0],
                end_date: this.listParam.pickerTime[1],
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                keyword: this.listParam.keyword,
            }

            this.$ajax.get('api/carte/lists', {params, func: {success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 充值菜单管理列表
         */
        resetList() {
            this.listParam = {
                keyword: '',
                pageIndex: 1,
                pageSize: 10,
                pickerTime: []
            }

            this.getList();
        },
        /**
         * 发布菜单
         */
        publish() {
            this.$router.push("/life/canteen/publish-menu");
        },
        /**
         * 详情页
         * @param {Number} id 菜单 id
         */
        goDetail(id) {
            this.$router.push("/life/canteen/menu-detail/" + id);
        },
        /**
         * 编辑页
         * @param {Number} id 菜单 id
         */
        editRow(id) {
            this.$router.push("/life/canteen/edit-menu/" + id);
        },
        /**
         * 是否删除该数据
         * @param {Number} val 要删除数据的 id
         */
        deleteRowConfirm(val) {
            let yes = (res => {
                this.rowLen = 1;

                this.deleteData(val);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '删除后不可恢复，确认删除吗？'});
        },
        /**
         * 是否确定批量删除
         */
        dleteAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要删除的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push(item.id);
                })

                this.deleteData(ids);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '确定要删除选中的项吗？'});
        },
        /**
         * 删除数据
         * @param {Number/Array} 要删除数据的 id
         * @param {Number/Array} 要删除数据的 car id
         */
        deleteData(id) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length === this.rowLen) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.$message.error(res.msg);

                this.getList();
            }) 
            let params = {
                id
            }
            
            this.$ajax.delete('api/carte/single', {params, func: {success: success, fail: fail}})
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.canteen-list {
    .open-width {
        .el-date-editor {
            width: 100%;
            vertical-align: middle;
        }
    }
}
</style>